<template>
  <el-container class="goods-edit">
    <el-header>
      
    </el-header>
    <el-main class="sa-p-t-10">
      <el-form :model="form.model" :rules="form.rules" ref="formRef0" label-width="100px">
        <div>
          <!-- <el-form-item label="服务分类" prop="category_id">
            <el-cascader v-model="form.model.category_id" :props="{
              value: 'id',
              label: 'title',
              emitPath: false,
            }" :options="state.categoryList" />
          </el-form-item> -->
          <el-form-item label="标签名称" prop="tag_name">
            <el-input v-model="form.model.tag_name" placeholder="请输入服务名称"></el-input>
          </el-form-item>
         
          <el-form-item label="选择图片" prop="icon">
            <div class="sa-flex sa-m-t-10">
              <sa-uploader v-model="form.model.icon" fileType="image"></sa-uploader>
            </div>
          </el-form-item>
          
          <!-- <el-form-item label="标签状态">
            <el-radio-group v-model="form.model.status">
              <el-radio :value="1">启用</el-radio>
              <el-radio :value="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item> -->
        </div>
      </el-form>
      
      
      
    </el-main>
    <el-footer class="sa-footer--submit">
      <el-button v-if="props.modal.params.type === 'add'"
                 v-auth="'seller.admin.tag.add'" type="primary" @click="confirm">保存
      </el-button>
      <el-button v-if="props.modal.params.type === 'edit'" v-auth="'seller.admin.tag.edit'" type="primary"
                 @click="confirm">更新
      </el-button>
    </el-footer>
  </el-container>
</template>
<script setup>
  import { onMounted, reactive, ref, computed, nextTick, getCurrentInstance } from 'vue';
  import { api } from './tag.service';
  import { cloneDeep } from 'lodash';

  const { proxy } = getCurrentInstance();

  const emit = defineEmits(['modalCallBack']);
  const props = defineProps({
    modal: {
      type: Object,
    },
  });
  let formRef = ref(null);
  const form = reactive({
    model: {
      tag_name:'',
      // status: 1,
    
    },
    rules: {
      tag_name: [{ required: true, message: '请输入标签名称', trigger: 'change' }],
      icon: [{ required: true, message: '请选择标签icon', trigger: 'change' }],

    
    },
  });



  //步骤条
  const validateData = ref({
    0: 0,
    1: 0,
    2: 0,
    3: 0,
  });

  onMounted(() => {
    if (props.modal.params.type === 'edit') {
      init();
    }
  });


  const init = async () => {
    const { error, data } = await api.details(props.modal.params.id);
    if (error === 0) {
      form.model = data.data;
     
    }
  };

 

  function confirm() {
    setTimeout(async () => {
      if (validateData.value[0] === 0 && validateData.value[3] === 0) {
        let submitForm = cloneDeep(form.model);


        const { error } =
          props.modal.params.type === 'add'
            ? await api.add({
              ...submitForm,
            })
            : await api.edit(props.modal.params.id, {
              ...submitForm,
            });
        if (error === 0) {
          emit('modalCallBack', {
            event: 'confirm',
          });
        }
      }
    }, 500);
  }

 


</script>
<style lang="scss" scoped>

  .goods-edit {
    .el-header {
      --el-header-height: fit-content;
    }

    .goods-type {
      width: 140px;
      height: 56px;
      border: 1px solid rgb(230, 230, 230);
      border-radius: 4px;
      margin-left: 16px;
      cursor: pointer;

      &.is-active {
        border: 1px solid var(--el-color-primary);
      }
    }

    .is-error {
      color: #FF4D4F;
    }
  }

  .goods-edit {
    .oper {
      :deep() {
        .el-form-item__content {
          height: 32px;
        }
      }
    }
  }

  .header {
    width: 100%;
    height: 40px;
    color: #434343;
    padding-left: 16px;
    background: var(--sa-table-striped);
    margin: 24px 0 16px 0;
    font-weight: 500;
    font-size: 14px;
  }

  //商品形式
  .goodstype {
    width: 140px;
    height: 56px;
    border-radius: 4px;
    position: relative;
  }

  .badge {
    color: var(--el-color-primary);
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    font-weight: 600;
    font-size: 14px;
    position: absolute;
    top: -8px;
    right: -8px;
  }

  //提示文本
  .warning-title {
    color: #faad14;
    font-size: 12px;
    line-height: 16px;
    margin-left: 16px;
  }

  .add-category {
    color: var(--el-color-primary);
    font-size: 14px;
    line-height: 16px;
  }

  //警告图标
  .icon-warning {
    width: 14px;
    height: 14px;
    display: flex;
    margin-left: 8px;
  }

  //精确图片
  .sales-hover-img {
    width: 220px;
    height: 98px;
    display: flex;
  }

  .stock-hover-img {
    width: 220px;
    height: 74px;
    display: flex;
  }

  //批量操作
  .batch {
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--sa-border);
    border-top: none;
    font-size: 12px;
    color: var(--sa-subtitle);

    .batch-title {
      margin-left: 12px;
      color: var(--el-color-primary);
      cursor: pointer;
    }

    .batch-cancle {
      margin-left: 8px;
      color: var(--sa-subfont);
    }
  }

  :deep() {
    //步骤条
    .el-step__head {
      display: none;
    }

    .el-step.is-simple:not(:last-of-type) .el-step__title {
      max-width: 100%;
    }

    .el-step__title.is-process {
      font-weight: 500;
      color: var(--el-color-primary);
    }

    .el-step__title.is-wait {
      font-weight: 500;
      color: var(--sa-font);
    }

    .el-step.is-simple .el-step__arrow::before {
      transform: rotate(-45deg) translateY(-3px);
      height: 9px;
    }

    .el-step.is-simple .el-step__arrow::after {
      transform: rotate(45deg) translateY(3px);
      height: 9px;
    }

    .el-steps--simple {
      background: var(--sa-table-header-bg);
    }

    .server {
      .el-form-item__content {
        width: 100%;
      }

      .el-button {
        border-radius: 0 4px 4px 0;
        background: var(--sa-table-header-bg);
      }

      .el-select__tags {
        padding-left: 12px;

        .el-tag {
          background: var(--sa-table-header-bg);
        }
      }
    }
  }

  img {
    width: 100%;
    height: 100%;
  }

  .success {
    color: red;
  }

  .sku-wrap {
    width: 100%;
    border: 1px solid #d9d9d9;
    padding: 8px;
    box-sizing: border-box;

    .sku {
      width: 100%;
      min-height: 100px;

      .sku-key {
        width: 100%;
        height: 40px;
        color: var(--sa-subtitle);
        padding: 0 16px;
        background: var(--sa-table-header-bg);
        font-size: 14px;

        .sku-key-input {
          width: 120px;
        }

        .sku-key-icon {
          color: var(--el-color-primary);
        }
      }

      .sku-value {
        padding: 12px 0 0 30px;
        font-size: 14px;
        color: var(--sa-subtitle);

        .sku-value-title {
          height: 32px;
        }

        .sku-value-box {
          position: relative;
          margin-right: 24px;

          .sku-value-input {
            width: 104px;
          }

          .sku-value-icon {
            position: absolute;
            right: -8px;
            top: -8px;
            width: 16px;
            height: 16px;
            color: var(--el-color-primary);
          }
        }

        .sku-value-add {
          width: 104px;
          height: 32px;
          font-size: 14px;
          color: var(--el-color-primary);
        }
      }
    }

    .sku-tools {
      width: 100%;
      height: 40px;
      color: #434343;
      padding-left: 16px;
      background: var(--sa-table-header-bg);
      font-size: 12px;

      .add {
      }
    }
  }

  .alledit-input {
    margin-bottom: 10px;
  }

  .sku-table-wrap {
    width: 100%;
    overflow: auto;
    margin-top: 16px;

    .sku-table {
      width: 100%;
      border: 1px solid var(--sa-border);

      tbody {
        font-size: 12px;
      }

      th {
        font-size: 12px;
        color: var(--subtitle);
        height: 32px;
        line-height: 1;
        padding-left: 12px;
        box-sizing: border-box;
        text-align: left;

        .sku-table-header-title {
          margin-right: 10px;
        }

        .th-title {
          font-size: 12px;
          color: var(--subtitle);
          font-weight: bold;
        }
      }

      td {
        min-width: 88px;
        padding: 0 10px;
        height: 40px;
        box-sizing: border-box;

        &.image {
          min-width: 48px;
        }

        &.stock {
          min-width: 138px;
        }

        &.stock_warning {
          min-width: 168px;

          .sku-stock-switch {
            margin-right: 10px;
          }
        }

        &.sn {
          min-width: 116px;
        }
      }
    }
  }

  .batch-icon {
    width: 12px;
    height: 12px;
    margin-left: 10px;
    color: var(--el-color-primary);
  }
</style>
<style lang="scss">
  .popper-category {
    // width: 350px;
    padding: 10px !important;

    .el-cascader-panel {
      overflow: auto;
    }

    .el-tooltip__trigger {
      position: relative;
      max-width: 360px;
      width: 100%;
    }
  }

  .category-content {
    position: relative;
    max-width: 360px;
    width: 100%;

    .category-tag {
      position: absolute;
      z-index: 10;
      left: 0;
      right: 76px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-wrap: wrap;
      line-height: normal;
      text-align: left;
      box-sizing: border-box;

      .el-tag {
        margin: 2px 0 2px 6px;
      }
    }
  }

  .category-tag-wrap {
    flex: 1;
    min-height: 32px;
    padding-right: 12px;
    border-radius: 4px;
    border: 1px solid var(--sa-border);
    cursor: pointer;
    position: relative;
  }

  .category-tag-wrap .el-tag {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin: 2px 0 2px 6px;
    text-overflow: ellipsis;
  }

  .category-tag-wrap-suffix {
    width: 12px;
    height: 100%;
    position: absolute;
    right: 6px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .category-tag-wrap-suffix .circle-close {
    display: none;
  }

  .category-tag-wrap-suffix.is-active:hover .circle-close {
    display: block;
  }

  .category-tag-wrap-suffix.is-active:hover .arrow-down {
    display: none;
  }

  .service-box {
    .service-box-item {
      width: 100%;
      border: 1px solid #eee;
      border-radius: 5px;


      .service-title {
        padding: 18px 20px 18px;
        background-color: #F0F0FD;
      }

      .service-content {
        padding: 10px 20px;

        .service-left {
          margin-right: 30px;
        }

        .service-right {
          flex: 1;

          .service-right-1 {
            padding: 10px;
            background-color: #F9F9F9;
            border-radius: 5px;

            .service-right-1-name {
              width: 100px;
            }
          }
        }
      }
    }
  }
</style>
